import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:hbtrans_flutter/beans/classdetail_bean.dart';
import 'package:hbtrans_flutter/beans/period_bean.dart';
import 'package:hbtrans_flutter/utils/fluro.dart';
import 'package:hbtrans_flutter/utils/mydio.dart';

import '../apis.dart';
import '../const.dart';
import '../routes.dart';

class Page2 extends StatefulWidget {
  final content;

  const Page2({Key key, this.content}) : super(key: key);

  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  var loadingDialog;
  var stunum;
  ClassdetailBean bean;
  List<PeriodBean> items = List();

  _periodList() async {
    print('stunum:$stunum');
    Map data = Map<String, dynamic>();
    data["stunum"] = stunum;
    MyDio.getInstance(url: Const.TRANS_SERVER_PATH).get(Apis.periodList,
        (data) {
      print(data);
      if (loadingDialog != null) {
        loadingDialog = null;
        Navigator.pop(context);
      }

      items.clear();
      for (var s in data) {
        items.add(PeriodBean.fromJson(s));
      }

      setState(() {});
    }, params: data);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    var map = FluroConvertUtils.string2map(
        FluroConvertUtils.fluroCnParamsDecode(widget.content));
    bean = ClassdetailBean.fromJson(map);
    stunum = bean.stunum;
    _periodList();
  }

  _setValue(int index) {
    if (items.length == 0) {
      return 0;
    }
    if (items[index].needtime == 0 || items[index].needtime < 0) {
      return 1;
    } else {
      return (items[index].lastinstancetime * 100) /
          (items[index].lastinstancetime + items[index].needtime);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: 54,
          color: const Color(0xff23AFDC),
        ),
        ListView(
          children: <Widget>[
            Item(
              index: '1',
              stunum: bean.stunum,
              title: '道路交通安全发律、法规和相关知识（大纲要求12学时）',
              value: _setValue(0),
              needtime: items.length != 0 ? items[0].needtime : "",
              lastinstancetime:
                  items.length != 0 ? items[0].lastinstancetime : "",
            ),
            Item(
              index: '2',
              title: '基础与场地驾驶（大纲要求16学时）',
              value: _setValue(1),
              needtime: items.length != 0 ? items[1].needtime : "",
              lastinstancetime:
                  items.length != 0 ? items[1].lastinstancetime : "",
            ),
            Item(
              index: '3',
              title: '道路驾驶（大纲要求24学时，培训里程300公里）',
              value: _setValue(2),
              needtime: items.length != 0 ? items[2].needtime : "",
              lastinstancetime:
                  items.length != 0 ? items[2].lastinstancetime : "",
            ),
            Item(
              index: '4',
              title: '安全文明驾驶（大纲要求10学时）',
              value: _setValue(3),
              needtime: items.length != 0 ? items[3].needtime : "",
              lastinstancetime:
                  items.length != 0 ? items[3].lastinstancetime : "",
            ),
            Center(
                child: Text(
              '注：提审有效学时为统计单位',
              style: TextStyle(fontSize: 10, color: const Color(0xff999999)),
            ))
          ],
        )
      ],
    );
  }
}

class Item extends StatelessWidget {
  final index;
  final title;
  final value;
  final stunum;
  final needtime;
  final lastinstancetime;

  const Item(
      {Key key,
      this.index,
      this.title,
      this.value,
      this.stunum,
      this.needtime = '',
      this.lastinstancetime = ''})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print(lastinstancetime);
        String route =
            '${Routes.periodDaily}?stunum=$stunum&subject=$index&needtime=$needtime&lastinstancetime=$lastinstancetime';
        Routes.router.navigateTo(context, route,
            replace: false, transition: TransitionType.fadeIn);
      },
      child: SizedBox(
        child: Card(
          color: Colors.white,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(18))),
          elevation: 10,
          margin: EdgeInsets.symmetric(horizontal: 15, vertical: 13),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 18),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      index,
                      style: TextStyle(fontSize: 50, color: Color(0xff3E3A39)),
                    ),
                    SizedBox(
                      width: 15,
                    ),
                    SizedBox(
                      width: 260,
                      child: Text(
                        title,
                        softWrap: true,
                        style:
                            TextStyle(fontSize: 12, color: Color(0xff3E3A39)),
                      ),
                    )
                  ],
                ),
                Seek(
                  value: value,
                  length: 300.0,
                  height: 17.0,
                ),
                SizedBox(
                  height: 15,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Seek extends StatelessWidget {
  final value;
  final length;
  final height;

  const Seek({Key key, this.value, this.length, this.height}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 33,
      width: length,
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 0,
            bottom: 0,
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                child: Container(
                  width: length,
                  height: height,
                  color: const Color(0xffF0F0F0),
                )),
          ),
          Positioned(
            left: 0,
            bottom: 0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Text(
                  '${value * 100}%',
                  style:
                      TextStyle(fontSize: 10, color: const Color(0xff23AFDC)),
                ),
                SizedBox(height: 5),
                ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    child: Container(
                      width: length * value,
                      height: height,
                      color: const Color(0xff23AFDC),
                    )),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
